//	筛选字段
import React, { useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import DragContainer from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/Drag/DragContainer';
import { Modal } from 'antd';
import FilterFieldString from './components/FilterFieldString';
import { DATE_TYPES, WD_TYPE, DL_TYPE } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';
import FilterFieldDate from './components/FilterFieldDate';
import FilterFieldMeasure from './components/FilterFieldMeasure';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const FilterField = ( props: IProps ) => {
	const { config, onValuesChange, form, currentDragNode } = props;
	const [ modalVisible, setModalVisible ] = useState( false );
	const [ currentField, setCurrentField ] = useState();		//	拖拽的字段属性
	const [ keyName, setKeyName ] = useState();			//	拖拽的字段的key名

	//	维度-字符串-列表
	const [ dimensionStringList, setDimensionStringList ] = useState( [] );

	//	维度-字符串-通配符
	const [ dimensionStringWildcard, setDimensionStringWildcard ] = useState( [] );

	//	维度-日期
	const [ dimensionDate, setDimensionDate ] = useState( [] );

	//	度量
	const [ measure, setMeasure ] = useState( [] );

	const dragOverHandle = ( array, node, name ) => {
		props.dragOver( null );
		console.log( 'node', node, name );
		setKeyName( name );
		setCurrentField( { ...node, dataType: String( node.dataType ), } );
		setModalVisible( true );
	};

	const onItemClick = ( e, node ) => {
		setKeyName( 'filterFields' );
		setCurrentField( node );
		setModalVisible( true );
	};

	//	初始化变量
	const initVar = () => {
		setDimensionStringList( [] );
		setDimensionStringWildcard( [] );
		setDimensionDate( [] );
		setMeasure( [] );
		setCurrentField( {} );
		setKeyName( '' );
	};

	const handleOk = () => {
		setConditions();
		setModalVisible( false );
		initVar();
	};

	const handleCancel = () => {
		setModalVisible( false );
		initVar();
	};

	const setConditions = () => {
		const conditions = [ ...dimensionStringList, ...dimensionStringWildcard, ...dimensionDate, ...measure ];
		const node = Object.assign( {}, currentField, { filterConditions: conditions } );
		let oldArray = Array.from( config.data[ keyName ] || [] ) as Array<any>;
		const item = oldArray.find( t => t.id === node.id );
		if ( item ) {
			oldArray = oldArray.map( s => {
				if ( s.id === node.id ) {
					return {
						...s,
						filterConditions: conditions
					};
				} else {
					return s;
				}
			} );
		} else {
			oldArray.push( node );
		}
		onValuesChange( config.type, config.key, { [ keyName ]: oldArray }, 'data' );
	};

	return (
		<>
			<FormItem label="内部数据筛选" name='filterFields'>
				<DragContainer
					form={ form }
					name='filterFields'
					tip='拖入字段'
					type='both'
					config={ config }
					dragOver={ dragOverHandle }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
					onItemClick={ onItemClick }
					isShowSetting={ false }
					isAutoDrag={ false }
				></DragContainer>
			</FormItem>

			{
				currentField && (
					<Modal
						visible={ modalVisible }
						title='数据筛选'
						okText='确定'
						cancelText='取消'
						onOk={ handleOk }
						onCancel={ handleCancel }
						className='filter_field_modal'
					>
						<p>已选择的字段：{ currentField.title }</p>
						{
							currentField.modelType === WD_TYPE && !DATE_TYPES.includes( currentField.dataType.toUpperCase() ) && (
								<FilterFieldString
									field={ currentField } config={ config }
									setDimensionStringList={ setDimensionStringList }
									setDimensionStringWildcard={ setDimensionStringWildcard }></FilterFieldString>
							)
						}
						{
							currentField.modelType === WD_TYPE && DATE_TYPES.includes( currentField.dataType.toUpperCase() ) && (
								<FilterFieldDate field={ currentField } setDimensionDate={ setDimensionDate }></FilterFieldDate>
							)
						}
						{
							currentField.modelType === DL_TYPE && (
								<FilterFieldMeasure field={ currentField } setMeasure={ setMeasure }></FilterFieldMeasure>
							)
						}
					</Modal>
				)
			}

		</>
	);
};

export default React.memo( FilterField );
